<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/admin/goods">商品管理</a></el-breadcrumb-item>
      <el-breadcrumb-item><a href="/admin/goods/add"></a>商品添加</el-breadcrumb-item>
    </el-breadcrumb>

    <h3 style="margin: 20px 0 40px 0;">商品信息添加详情</h3>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
      <el-form-item label="商品名称" prop="goodsName">
        <el-input v-model="ruleForm.goodsName"></el-input>
      </el-form-item>
      <el-form-item label="商品图片" prop="goodsImg">
        <el-upload
            action="http://localhost:8888/api/pri/file/upload"
            name="file"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="商品市场价格" prop="goodsMarketPrice">
        <el-input v-model="ruleForm.goodsMarketPrice"></el-input>
      </el-form-item>
      <el-form-item label="商品现价" prop="goodsPrice">
        <el-input v-model="ruleForm.goodsPrice"></el-input>
      </el-form-item>
      <el-form-item label="商品预警库存" prop="goodsWarnTock">
        <el-input v-model="ruleForm.goodsWarnTock"></el-input>
      </el-form-item>
      <el-form-item label="商品总库存" prop="goodsStock">
        <el-input v-model="ruleForm.goodsStock"></el-input>
      </el-form-item>
      <el-form-item label="类别Id" prop="categoryId">
        <el-input v-model="ruleForm.categoryId"></el-input>
      </el-form-item>
      <el-form-item label="品牌Id" prop="brandId">
        <el-input v-model="ruleForm.brandId"></el-input>
      </el-form-item>
      <el-form-item label="商品状态" prop="goodsState">
        <el-input v-model="ruleForm.goodsState"></el-input>
      </el-form-item>
      <el-form-item label="商品描述" prop="goodsDesc">
        <el-input v-model="ruleForm.goodsDesc"></el-input>
      </el-form-item>
      <el-form-item label="商品规格" prop="goodsParams">
        <el-input v-model="ruleForm.goodsParams"></el-input>
      </el-form-item>
      <el-form-item label="是否上架" prop="isSale">
        <el-switch
            v-model="ruleForm.isSale"
            active-value="1"
            inactive-value="0"
            active-color="#13ce66"
            inactive-color="#999">
        </el-switch>
      </el-form-item>

      <el-form-item label="是否删除" prop="isDelete">
        <el-switch
            v-model="ruleForm.isDelete"
            active-value="1"
            inactive-value="0"
            active-color="#13ce66"
            inactive-color="#999">
        </el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>
<script>
import Common from "@/views/common/Common"

export default {
  data() {
    return {
      ruleForm: {
        goodsName: '',
        goodsMarketPrice: '',
        goodsPrice: '',
        picFile: '',
        goodsWarnTock: '',
        goodsStock: '',
        categoryId: '',
        brandId: '',
        goodsState: '',
        goodsDesc: '',
        goodsParams: '',
        isSale: 1,
        isDelete: 1,
      },
      dialogImageUrl: '',
      dialogVisible: false,
      rules: {
        goodsName: [
          {required: true, message: '请输入商品名', trigger: 'blur'},
          {min: 1, max: 99, message: '长度在 1 到 99 个字符', trigger: 'blur'}
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = Common.data.BASEURI+ 'goods/info/addGoods';
          console.log('url >>> ' + url);
          console.log('data >>> ');
          console.log(this.ruleForm);
          this.axios
              .create({'headers': {'Authorization': "Bearer " + localStorage.getItem('jwt')}})
            .post(url,this.ruleForm).then((response) =>{
            console.log(response.data);
            if (response.data.state == 200) {
              this.$message({
                message: '添加商品成功！',
                type: 'success'
              });
            } else {
              this.$message.error(response.data.message);
            }
          }).catch(function (error) {
            console.log('响应结果为失败!');
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      //发请求告诉服务器删除文件夹里面的文件
      //得到要删除的文件名
      // let fileName= file.response;
      // console.log("文件名:"+fileName);
      // axios.get("/remove?fileName="+fileName).then(function (response) {
      //   console.log("服务器文件删除完成!");
      // })
    },
    handlePictureCardPreview(file) {

      // axios.post("/api/pri/file/upload").then(function (response) {
      //   console.log("服务器文件上传完成!");
      // })
    },

  }
}
</script>
